<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>bootstrap4toggle size check</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
	<link rel="stylesheet "href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle/css/bootstrap4-toggle.min.css">
	<!--
	<link rel="stylesheet" href="../css/bootstrap4-toggle.css">
	-->

	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle/js/bootstrap4-toggle.min.js"></script>
	<!--
	<script src="../js/bootstrap4-toggle.js"></script>
	-->

	<script>
		// APP
		const APP_VER = '1.0.0';
		const APP_REL = '20181209';

		// ==================================================================================================================

		function doCompare() {
			$('[id^="size-"]').each(function(){
				var $row = $(this).find('.row:eq(1)');
				$(this).find('.row:eq(0) .col').each(function(idx){
					console.log(idx);
					var strHtml = '<div class="badge badge-success text-monospace">H: '+ $(this).find('div.toggle, .btn, [class^="form-control"]').css('height') +'</div>';
					$row.find('.col:eq('+idx+')').append( strHtml );
				});
			});
		}

		function appStartup() {
			setTimeout(doCompare,500);
		}

		// ==================================================================================================================
		window.onload = function(){ appStartup() };
	</script>
</head>
<body class="bg-light p-4">
	<div id="appHeader" class="container">
		<div class="row align-items-center">
			<div class="col-10 px-0">
				<h1 class="text-primary font-weight-light">Test App: Bootstrap-vs-bootstrap4toggle</h1>
			</div>
			<div class="col-2 pr-0">
				<code>Bootstrap 4.1.3</code>
			</div>
		</div>
		<div class="row">
			<div class="col px-1">
				<p class="text-muted">
					Compares size of <code>bootstrap</code> buttons to <code>bootstrap4-toggle</code> buttons
				</p>
			</div>
		</div>
	</div>

	<div class="container">
		<h4 class="text-primary font-weight-light">Large</h4>
	</div>
	<div id="size-lg" class="container border p-3 mb-4">
		<div class="row mb-3">
			<div class="col px-5 py-3">
				<input type="checkbox" data-style="w-100" data-toggle="toggle" data-size="lg" checked>
			</div>
			<div class="col px-5 py-3">
				<button class="btn btn-lg btn-info w-100">Button</button>
			</div>
			<div class="col px-5 py-3">
				<select class="form-control-lg w-100">
					<option val="Choice 1">select</option>
				</select>
			</div>
			<div class="col px-5 py-3">
				<input type="text" class="form-control-lg w-100" placeholder="text">
			</div>
		</div>
		<div class="row align-items-center">
			<div class="col text-center"></div>
			<div class="col text-center"></div>
			<div class="col text-center"></div>
			<div class="col text-center"></div>
		</div>
	</div>

	<div class="container">
		<h4 class="text-primary font-weight-light">Default</h4>
	</div>
	<div id="size-md" class="container border p-3 mb-4">
		<div class="row mb-3">
			<div class="col px-5 py-3">
				<input type="checkbox" data-style="w-100" data-toggle="toggle" checked>
			</div>
			<div class="col px-5 py-3">
				<button class="btn btn-info w-100">Button</button>
			</div>
			<div class="col px-5 py-3">
				<select class="form-control w-100">
					<option val="Choice 1">select</option>
				</select>
			</div>
			<div class="col px-5 py-3">
				<input type="text" class="form-control w-100" placeholder="text">
			</div>
		</div>
		<div class="row align-items-center">
			<div class="col text-center"></div>
			<div class="col text-center"></div>
			<div class="col text-center"></div>
			<div class="col text-center"></div>
		</div>
	</div>

	<div class="container">
		<h4 class="text-primary font-weight-light">Small</h4>
	</div>
	<div id="size-sm" class="container border p-3 mb-4">
		<div class="row mb-3">
			<div class="col px-5 py-3">
				<input type="checkbox" data-style="w-100" data-toggle="toggle" data-size="sm" checked>
			</div>
			<div class="col px-5 py-3">
				<button class="btn btn-sm btn-info w-100">Button</button>
			</div>
			<div class="col px-5 py-3">
				<select class="form-control-sm w-100">
					<option val="Choice 1">select</option>
				</select>
			</div>
			<div class="col px-5 py-3">
				<input type="text" class="form-control-sm w-100" placeholder="text">
			</div>
		</div>
		<div class="row align-items-center">
			<div class="col text-center"></div>
			<div class="col text-center"></div>
			<div class="col text-center"></div>
			<div class="col text-center"></div>
		</div>
	</div>
</body>
</html>
